<template>
  <ych-modal
    :fullscreen="false"
    size="small"
    :title="$t('m.bpm.design.optionsValueDialog')"
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"
    :cancelText="$t('m.common.button.close')">

    <a-table
      ref="table"
      size="middle"
      bordered
      :pagination="false"
      rowKey="value"
      :columns="columns"
      :dataSource="options"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio'}"
      :customRow="clickThenCheck"
    >
    </a-table>

  </ych-modal>
</template>

<script>

export default {
  name: "OptionsValueDialog",
  data() {
    return {
      visible: false,
      options: [],
      selectedRowKeys: [],
      columns: [{
        title: this.$t('m.bpm.design.optionsValueDialog-value'),
        align: 'center',
        width: 180,
        dataIndex: 'value'
      }, {
        title: this.$t('m.bpm.design.optionsValueDialog-text'),
        align: 'center',
        width: 180,
        dataIndex: 'text'
      }],
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
    },
    handleOk() {
      const value = this.selectedRowKeys.length > 0 ? this.selectedRowKeys[0] : ''
      this.$emit("ok", value)
      this.handleCancel()
    },
    open(options) {
      this.options = options || []
      this.visible = true
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    clickThenCheck(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record['value'].split(','), [record])
          }
        }
      }
    },
  }
}
</script>
